<template>
  <fui-nav-bar
    isOccupy
    isFixed
    background="#0052D9"
    title="设备报修"
    color="#fff"
    @leftClick="leftClick"
    @rightClick="rightClick"
  >
    <fui-icon color="#fff" name="arrowleft"></fui-icon>
    <template v-slot:right>
      <fui-icon color="#fff" name="plus"></fui-icon>
    </template>
  </fui-nav-bar>
  <view class="viewport">
    <view class="warp">
      <view class="head">
        <view class="ipt">
          <u--input
            v-model="searchKeyword"
            placeholder="请输入设备报修单号"
            prefixIcon="search"
            prefixIconStyle="font-size: 22px;color: #909399"
            @change="handleSearch"
          ></u--input>
        </view>
        <view class="screen" @click="screen">
          <image
            class="img"
            src="/static/images/index/shaixuan.svg"
            mode=""
          ></image>
          筛选
        </view>
      </view>
      <scroll-view
        class="scroll-view"
        :refresher-triggered="refreshing"
        refresher-enabled
        scroll-y="true"
        lower-threshold="20"
        @scrolltolower="onScrollToLower"
        @refresherrefresh="onRefresh"
        refresher-background="#f6f6f6"
      >
        <view class="port">
          <view
            v-if="!list.length && !loading"
            style="text-align: center; padding: 40rpx; color: #999"
            >暂无数据</view
          >
          <view
            class="ul"
            v-for="item in list"
            :key="item.id"
            @click="particulars(item.id)"
          >
            <view class="title">{{ item.applyTitle || "设备报修" }}</view>
            <view class="li">
              <span class="left">报修单号</span>
              <span>{{ item.applyCode }}</span>
            </view>
            <view class="li">
              <span class="left">设备名称</span>
              <span>{{ item.deviceName }}</span>
            </view>
            <view class="li">
              <span class="left">设备编号</span>
              <span>{{ item.deviceCode }}</span>
            </view>
            <view class="li">
              <span class="left">存放位置</span>
              <span>{{ item.storageLocation }}</span>
            </view>
            <view class="footer">
              <span>{{ item.createTime }}</span>
              <view class="audit">{{ statusMap[item.status] }}</view>
            </view>
          </view>
          <view
            v-if="loading"
            style="text-align: center; padding: 30rpx; color: #0052d9"
            >加载中...</view
          >
          <view
            v-if="noMore && list.length"
            style="text-align: center; padding: 30rpx; color: #999"
            >没有更多了</view
          >
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { nextTick, ref, onMounted } from "vue";
import { getMalfunctionRepairList } from "@/pages/api/subpkg_index/malfunctionRepair.js";

const list = ref([]);
const total = ref(0);
const refreshing = ref(false);
const loading = ref(false);
const noMore = ref(false);
const current = ref(1);
const size = ref(10);
const filterParams = ref({});
const searchKeyword = ref("");

const statusMap = {
  1: "待审核",
  2: "驳回",
  3: "已转工单",
  5: "已审批",
  6: "待实施",
  7: "实施中",
  8: "待验收",
  9: "已取消",
  10: "已完成",
};

const fetchList = async (isRefresh = false) => {
  if (loading.value) return;
  loading.value = true;
  try {
    const params = {
      current: current.value,
      size: size.value,
      applyCode: searchKeyword.value,
      ...filterParams.value,
    };
    console.log("请求参数:", params);
    const res = await getMalfunctionRepairList(params);
    if (res && res.code === 200 && res.data) {
      if (isRefresh) {
        list.value = res.data.records || [];
      } else {
        list.value = [...list.value, ...(res.data.records || [])];
      }
      total.value = res.data.total || 0;
      noMore.value = list.value.length >= total.value;
    }
  } catch (e) {
    uni.showToast({ title: "获取数据失败", icon: "none" });
  } finally {
    loading.value = false;
    refreshing.value = false;
  }
};

onMounted(() => {
  fetchList(true);
});

const leftClick = () => {
  uni.reLaunch({
    url: "/pages/index/index",
  });
};
//去添加设备报修
const rightClick = () => {
  uni.navigateTo({
    url: "/subpkg_index/malfunctionRepair/add",
  });
};
const screen = () => {
  uni.navigateTo({
    url: "/subpkg_index/malfunctionRepair/audit",
    events: {
      filter: (params) => {
        console.log("筛选条件回传:", params);
        filterParams.value = params;
        current.value = 1;
        list.value = [];
        fetchList(true);
      },
    },
  });
};
//去详情页，传id
const particulars = (id) => {
  uni.navigateTo({
    url: `/subpkg_index/malfunctionRepair/particulars?id=${id}`,
  });
};

//滚动条加载数据
const onScrollToLower = () => {
  if (noMore.value) return;
  current.value++;
  fetchList();
};

//下拉刷新
const onRefresh = async () => {
  refreshing.value = true;
  current.value = 1;
  noMore.value = false;
  await fetchList(true);
};

const handleSearch = () => {
  current.value = 1;
  list.value = [];
  fetchList(true);
};
</script>

<style lang="scss" scoped>
page {
  display: flex;
  height: 100%;
  overflow: hidden;
  flex-direction: column;
}
.viewport {
  flex: 1;
  display: flex;
  // height: 100%;
  overflow: hidden;
  flex-direction: column;
}

.warp {
  flex: 1;
  overflow: hidden;
  background-color: #f6f6f6;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  /*  #ifdef  APP-PLUS || H5 */
  .scroll-view {
    flex: 1;
    height: 100%;
    // height: 80vh;
    padding-bottom: 120rpx;
  }
  /*  #endif  */

  /*  #ifdef  MP-WEIXIN  */
  .scroll-view {
    // flex: 1;
    // height: 100%;
    height: 80vh;
  }
  /*  #endif  */
  .head {
    display: flex;
    align-items: center;
    background-color: #fff;
    height: 120rpx;
    padding: 20rpx;
    // margin-bottom: 24rpx;
    .ipt {
      flex: 1;
      margin-left: 25rpx;
      height: 100rpx;
      display: flex;
      align-items: center;
    }

    .screen {
      // width: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .img {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }
    }
  }
  .port {
    .ul {
      margin-bottom: 24rpx;
      background-color: #fff;
      padding: 0 30rpx;

      .title {
        color: #0052d9;
        font-size: 35rpx;
        font-weight: 600;
        height: 80rpx;
        line-height: 80rpx;
      }
      .li {
        color: #ccc;
        height: 50rpx;
        line-height: 50rpx;
        .left {
          color: #000;
          margin-right: 30rpx;
        }
      }
      .footer {
        display: flex;
        height: 80rpx;
        align-items: center;
        justify-content: space-between;
        .audit {
          border-radius: 25rpx;
          border: 1rpx solid #0052d9;
          height: 48rpx;
          width: 120rpx;
          display: flex;
          font-size: 28rpx;
          color: #0052d9;
          align-items: center;
          justify-content: space-around;
        }
      }
    }
  }
}
</style>
